<template>
<div>
  <ul>
    <li v-for="(item,index) of p" :key="item.id">
      <input @click="itemClick(index,item.check)" type="checkbox" v-model="item.check">
      <img width="40px" height="40px" :src="item.imgList[0]" alt="">
      <span>{{item.price}}</span>
    </li>
  </ul>

  <div class="allCheck">
    <input @click="all" type="checkbox" v-model="allCheck"> 全选
    <div>
      {{totalPrice()}}
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "cart",
  data(){
    return{
      product:[
          {
        id:'1',
        productName:'小米头戴影院 1080P 954英寸巨幕观影体验 智能家庭移动头戴影院',
        price:899,
        originalPrice:1299,
        content:2,
        imgList:['https://img10.360buyimg.com/n5/s54x54_jfs/t1/60135/32/531/134911/5cebc21cE02aaf6ea/aae591ee50e0a7ad.jpg',"hhttps://img10.360buyimg.com/n1/s450x450_jfs/t1/68896/12/7215/117717/5d550512Ec1ad1a86/76b83a75eecd1d40.jpg"],
        parameter:{
          '选择版本':[{title:'新品观影版本',pic:null,check:false}, {title:'64G版',pic:null,check:false}],
          "增值保障":[{title:'官方半年',check:false}, {title:'3年免费换新',check:false}, {title:'3年全保修',check:false}],
          "分期付款":[{title:'不分期',check:false},{title:'¥1048.50 x 3期',check:false},{title:'¥532.00 x 6期',check:false}]
        }
      },{
        id:'2',
        productName:'富士（FUJIFILM）X-A5/XA5 微单相机 套机 星光棕（15-45mm镜头 ) 2420万像素 4K视频 蓝牙WIFI',
        price:3199,
        originalPrice:4399,
        content:1,
        imgList:['https://img11.360buyimg.com/n1/s450x450_jfs/t24109/242/2104618247/104971/a203c288/5b7539c6Ne0f567ad.jpg',"https://img11.360buyimg.com/n9/s40x40_jfs/t1/107771/20/13597/248581/5ea14ffcEce44c663/9f5d9a435a01f74f.jpg"],
        parameter:{
          '选择颜色':[{title:'银黑色',pic:'https://img10.360buyimg.com/n9/s40x40_jfs/t1/115601/3/2327/223800/5ea15037Ee325b6ae/c02bf94ac10ae7f3.jpg',check:false}, {title:'星光棕',pic:'https://img11.360buyimg.com/n9/s40x40_jfs/t1/107771/20/13597/248581/5ea14ffcEce44c663/9f5d9a435a01f74f.jpg',check:false}],
          "增值保障":[{title:'官方半年',check:false}, {title:'3年免费换新',check:false}, {title:'3年全保修',check:false}],
          "分期付款":[{title:'不分期',check:false},{title:'¥1048.50 x 3期',check:false},{title:'¥532.00 x 6期',check:false}]
        }
      },{
        id:'3',
        productName:'富士（FUJIFILM）X-A5/XA5 微单相机 套机 星光棕（15-45mm镜头 ) 2420万像素 4K视频 蓝牙WIFI',
        price:54332,
        originalPrice:4399,
        content:2,
        imgList:['https://img11.360buyimg.com/n1/s450x450_jfs/t24109/242/2104618247/104971/a203c288/5b7539c6Ne0f567ad.jpg',"https://img11.360buyimg.com/n9/s40x40_jfs/t1/107771/20/13597/248581/5ea14ffcEce44c663/9f5d9a435a01f74f.jpg"],
        parameter:{
          '选择颜色':[{title:'银黑色',pic:'https://img10.360buyimg.com/n9/s40x40_jfs/t1/115601/3/2327/223800/5ea15037Ee325b6ae/c02bf94ac10ae7f3.jpg',check:false}, {title:'星光棕',pic:'https://img11.360buyimg.com/n9/s40x40_jfs/t1/107771/20/13597/248581/5ea14ffcEce44c663/9f5d9a435a01f74f.jpg',check:false}],
          "增值保障":[{title:'官方半年',check:false}, {title:'3年免费换新',check:false}, {title:'3年全保修',check:false}],
          "分期付款":[{title:'不分期',check:false},{title:'¥1048.50 x 3期',check:false},{title:'¥532.00 x 6期',check:false}]
        }
      }],
      allCheck:false,
    }
  },
  computed:{
    p(){
      this.product.forEach(item=>{
        item.check = false
      })
      return this.product
    },
  },
  methods:{
    all(e){
        console.log(e.target.checked)
        this.product.forEach(item=>{
          item.check = e.target.checked
        })
    },
    totalPrice(){
      let num = 0
      this.product.forEach(item=>{
        if (item.check){
          num+=item.price * item.content
        }
      })
      console.log('计算')
      return num
    },
    itemClick(index,state){
      this.product[index].check = !state
      this.isall()
    },
    isall(){
      for (let i =0;i<this.product.length;i++){
        console.log(this.product[i])
        if (this.product[i].check===false){
          this.allCheck = false
          return
        }else {
          this.allCheck = true
        }
      }
    }
  }
}
</script>

<style scoped>
.allCheck{
  line-height: 50px;
  margin-top: 40px;
  width: 100%;
  background-color: #e3e4e5;
}
</style>
